import { useSelector, useDispatch } from 'react-redux';
import { setUserInfo } from '@/store/counterSlice';
import { Layout, Dropdown, Button, Avatar } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
const { Header } = Layout;
const index = ({ collapsed, setCollapsed }) => {
  const dispatch = useDispatch();
  const userInfo = useSelector((state) => state.counter.userInfo);
  const handleLogout = () => {
    dispatch(
      setUserInfo({
        token: '',
        user_name: '',
        permissionCode: [],
      })
    );
  };
  return (
    <Header className=" bg-white flex items-center justify-between p-[0 16px]">
      <UnorderedListOutlined onClick={() => setCollapsed(!collapsed)} />
      <div className="flex items-center">
        <div className="mr-2">{userInfo.user_name}</div>
        <Dropdown
          placement="bottom"
          menu={{
            items: [
              {
                key: '0',
                label: (
                  <Button type="text" onClick={handleLogout} className="w-full">
                    退出登录
                  </Button>
                ),
              },
            ],
          }}
        >
          <Avatar src="https://ts3.cn.mm.bing.net/th?id=OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" />
        </Dropdown>
      </div>
    </Header>
  );
};
export default index;
